<template>
  <div style="width:100%; height:100%;">
    <div><van-icon name="arrow-left" size="40px" @click="clickBack" /></div>
    <img :src="this.getGoodsInfo.info.imgUrl" width="100%" height="300px" />
    <div style="height:100%; display:flex; flex-direction: column; overflow: hidden;">
      <div class="shopinfo-header">
        <div class="goodsname">{{ getGoodsInfo.info.name }}</div>
        <p>
          <span>月售{{ getGoodsInfo.info.sellCount }}份</span
          ><span>好评率{{ getGoodsInfo.info.rating }}%</span>
        </p>
        <div class="goods-price">
          <div>
            <strong>￥{{ getGoodsInfo.info.price }}</strong
            ><del>￥{{ getGoodsInfo.info.price * 1.2 + 13 }}</del>
          </div>
          <div class="shop-cart" @click="clickJoinShopCart(getGoodsInfo.info.id)">
            <van-icon name="cart" size="18px" />
            加入购物车
          </div>
        </div>
      </div>
      <div class="box"></div>
      <div class="shop-desc">
        <h3 class="shop-desc-title">商品介绍</h3>
        <p class="shop-desc-text">{{ getGoodsInfo.info.goodsDesc }}</p>
      </div>
      <div class="box"></div>
      <div style="flex:1; overflow: scroll; ">
        <van-tabs v-model="activeName">
          <van-tab title="全部" name="a">
            <div
              v-for="(item, index) in this.getGoodsInfo.ratings"
              :key="index"
              style="border-bottom:1px solid #eee; padding-bottom:10px;"
            >
              <div class="evaluate-item">
                <div class="evaluate-time">{{ item.rateTime }}</div>
                <div class="evaluate-people">
                  {{ item.username }}
                  <img
                    :src="item.avatar"
                    width="30px"
                    height="30px"
                    style="border-radius: 50%;"
                  />
                </div>
              </div>
              <div class="evaluate-text">{{ item.text }}</div>
            </div>
          </van-tab>
          <van-tab title="推荐" name="b">推荐</van-tab>
          <van-tab title="吐槽" name="c">吐槽</van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "a",
    };
  },
  computed: {
    getGoodsInfo() {
      return this.$route.query;
    },
  },
  methods: {
    clickBack() {
      this.$router.back();
    },
    //加入购物车
    clickJoinShopCart(id){
        this.$store.commit("changeShopCartNum",{id,num:1})
    }   
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  
}
.shopinfo-header {
  padding: 10px;
  .goodsname {
    font-size: 20px;
    font-weight: 800;
  }
  span {
    font-size: 14px;
    color: #bbb;
    margin-left: 15px;
  }
  .goods-price {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    strong {
      color: firebrick;
      font-size: 22px;
    }
    del {
      color: #bbb;
      margin-left: 10px;
      font-size: 14px;
    }
    .shop-cart {
      width: 120px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 14px;
      font-weight: 600;
      background-color: goldenrod;
      border-radius: 25px;
    }
  }
}
.box {
  height: 20px;
  background-color: #eee;
}
.shop-desc {
  padding: 10px;
  .shop-desc-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
  }
  .shop-desc-text {
    line-height: 1.5em;
  }
}
.van-tabs {
  padding: 0px 10px 30px 10px;
}
.evaluate-item {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .evaluate-time {
    color: #bbb;
    font-size: 14px;
  }
  .evaluate-people {
    font-weight: 600;
  }
}
.evaluate-text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5em;
}
</style>
